@import "reset";
@import "mixin-background";
@import "mixin-position";
@import "mixin-transform";

// ==============================================
// common
// ==============================================
.container{
	position: relative;
	width: 1100px;
	margin: 0 auto;
}


// ==============================================
// header
// ==============================================
.header{
	@include position(fixed, 100, 0, 0, none, 0);
	height: 100px;
	border-bottom: 1px solid $colorE0;
	background-color: $colorFFF;
	.logo{
		float: left;
		width: 128px;
		height: 46px;
		margin-top: 27px;
		@include backgroundImage('../image/logo.png', no-repeat, 0, 0, 100%, 100%);
	}

	.menu{
		float: right;

		.nav{
			float: left;
			margin-top: 38px;

			ul{
				li{
					float: left;
					width: 120px;
					text-align: center;

					a{
						display: inline-block;
						height: 24px;
						padding: 0 4px;
						font-size: 16px;
						line-height: 24px;
						color: $color999;

						&:hover{
							color: $color333;
						}
					}
					span{
						display: none;
						width: 26px;
						height: 2px;
						margin-top: 7px;
						background-color: $colorYellow;
					}

					&.active{
						a{
							color: $colorYellow;
						}
						span{
							display: inline-block;
						}
					}
				}
			}
		}

		.telephone{
			float: left;
			margin-top: 42px;
			padding-left: 42px;
			height: 16px;
			line-height: 16px;
			font-size: 12px;
			color: $color999;
			border-left: 1px solid $colorE0;
			@include backgroundImage('../image/tel.png', no-repeat, 21px, 1px, 12px, 13px);
		}
	}
}




// ==============================================
// footer
// ==============================================
.footer{
	background-color: #272727;

	.container{
		width: 960px;
		height: 220px;
		padding: 0 70px;
		overflow: hidden;

		&.index-footer{
			width: 1100px;
			padding: 0;
		}
	}

	.footer-friends{
		float: left;
		width: 140px;
		margin-top: 27px;

		h1{
			font-size: 18px;
			color: $color999;
			line-height: 40px;
		}

		ul{
			li{
				a{
					font-size: 12px;
					color: $color999;
					line-height: 24px;
					margin-bottom: 9px;
				}
			}
		}
	}

	.info{
		float: left;
		margin-top: 31px;

		.tel{
			padding-left: 30px;
			font-size: 20px;
			color: $color999;
			line-height: 36px;
			@include backgroundImage('../image/footer-icon-tel-19x19.png', no-repeat, left, 10px, 19px, 19px);

			span{
				font-size: 14px;
			}
		}
		.text{
			font-size: 12px;
			color: $color999;
			line-height: 24px;
		}
		.copy{
			margin-top: 4px;
			font-size: 12px;
			color: $color999;
			line-height: 24px;
		}
	}

	.qrCode-box{
		float: right;
		margin-top: 38px;
		height: 152px;
		padding-right: 187px;
		@include backgroundImage('../image/footer-text-155x55.png', no-repeat, right, 37px, 155px, 55px);

		.qrcode{
			float: left;
			width: 112px;
			height: 40px;
			margin-left: 33px;
			padding-top: 112px;
			font-size: 12px;
			color: $color999;
			line-height: 40px;
			text-align: center;

			&.qrcode-1{
				display: none;
				@include backgroundImage('../image/footer-qrCode-1-112x112.jpg', no-repeat, center, top, 112px, 112px);
			}

			&.qrcode-2{
				@include backgroundImage('../image/footer-qrCode-2-112x112.jpg', no-repeat, center, top, 112px, 112px);
			}
		}
	}
}



@media screen and (max-width: 1601px){
	.header{
		height: 82px;

		.logo{
			margin-top: 18px;
		}

		.menu{
			.nav{
				margin-top: 29px;
			}

			.telephone{
				margin-top: 33px;
			}
		}
	}
}


